// pages/home/home-nav/medical-condition/bmi-control/bmi-chart-bar/bmi-chart-bar.ts
// @ts-ignore
import * as echarts from '../../../../../../components/ec-canvas/echarts';
import { initEcharts } from '../../../../../../utils/util'

var option = {
  tooltip: {
    show: false,
  },
  grid: {
    top: '3%',
    left: '35%',
    right: '20%',
    bottom: '3%',
  },
  xAxis: {
    type: 'value',
    show: false,
  },
  yAxis: {
    type: 'category', // 将 yAxis 类型修改为 'category'
    data: null,
    axisLabel: {
      formatter(value: any) {
        return `${value}`; // 修正 formatter 函数
      },
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: '偏瘦',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        position: 'center',
        formatter: (params: any) => {
          // 判断数据点的索引或值，返回不同的文本
          if (params.dataIndex === 0) {
            return '低';
          } else if (params.dataIndex === 1) {
            return '偏瘦';
          } else {
            return ''; // 如果没有匹配的，返回空字符串
          }
        },
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: 'blue',
          },
          
        },
        {
          value: 1,
          itemStyle: {
            color: 'blue',
          },
          
        },
      ],
      barWidth: 20,
    },
    {
      name: '正常',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        position: 'center',
        formatter: (params: any) => {
          // 判断数据点的索引或值，返回不同的文本
          if (params.dataIndex === 0) {
            return '平均水平';
          } else if (params.dataIndex === 1) {
            return '正常';
          } else {
            return ''; // 如果没有匹配的，返回空字符串
          }
        },
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: 'green',
          },
        },
        {
          value: 1,
          itemStyle: {
            color: 'green',
          },
        },
      ],
      barWidth: 20,
    },
    {
      name: '偏胖',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        position: 'center',
        formatter: (params: any) => {
          // 判断数据点的索引或值，返回不同的文本
          if (params.dataIndex === 0) {
            return '增加';
          } else if (params.dataIndex === 1) {
            return '偏胖';
          } else {
            return ''; // 如果没有匹配的，返回空字符串
          }
        },
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: 'yellow',
          },
        },
        {
          value: 1,
          itemStyle: {
            color: 'yellow',
          },
        },
      ],
      barWidth: 20,
    },
    {
      name: '肥胖',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        position: 'center',
        formatter: (params: any) => {
          // 判断数据点的索引或值，返回不同的文本
          if (params.dataIndex === 0) {
            return '重度增加';
          } else if (params.dataIndex === 1) {
            return '肥胖';
          } else {
            return ''; // 如果没有匹配的，返回空字符串
          }
        },
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: 'orange',
          },
        },
        {
          value: 1,
          itemStyle: {
            color: 'orange',
          },
        },
      ],
      barWidth: 20,
    },
    {
      name: '重度肥胖',
      type: 'bar',
      stack: 'total',
      label: {
        show: false,
        position: 'center',
        formatter: (params: any) => {
          // 判断数据点的索引或值，返回不同的文本
          if (params.dataIndex === 0) {
            return '严重增加';
          } else if (params.dataIndex === 1) {
            return '重度肥胖';
          } else {
            return ''; // 如果没有匹配的，返回空字符串
          }
        },
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: 'red',
          },
        },
        {
          value: 1,
          itemStyle: {
            color: 'red',
          },
        },
      ],
      barWidth: 20,
    },
  ],
};

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
    realData: {
      categories: ['疾病诱发风险性', '身体情况']
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeChart() {
      // 更新数据重新数据初始化
      const canvasComponent = this.selectComponent("#bmi-chart-bar");
      // note: 动态获取数据后更新this.data.realData，即可。
      const numchartType = this.data.realData;
      const options = this.changeOptionsData(numchartType)
      initEcharts(options, canvasComponent);
    },
    // 传入动态数据
    changeOptionsData(initData: any) {
      option.yAxis.data = initData.categories;
      return option;
    },
    changeOptionShow(bmiStatus: number) {
      console.log('bmiStatus是', bmiStatus);
      option.series[bmiStatus - 1].label.show = true;
      return option;
    }
  },
  /*
  * 组件所在页面的生命周期
  */
  pageLifetimes: {
    show: function () {
      this.changeChart();
    },
  },
})